<template>
  <div class="w-100 h-100 flex-vertical justify-content-center p-5">
    <div>
      <img class="w-100" src="@img/find/banner.png" alt="" />
    </div>
    <div class="send-box w-100 p-4">
      <div class="input-box flex-item align-items-center py-2">
        <div class="flex-label mr-3">宠物类型</div>
        <div class="flex-content">
          <el-select v-model="form.type" class="w-100" placeholder="请选择">
            <el-option label="类型1" value="1" />
            <el-option label="类型2" value="2" />
            <el-option label="类型3" value="3" />
          </el-select>
        </div>
      </div>
      <div class="input-box flex-item align-items-center py-2">
        <div class="flex-label mr-3">宠物品种</div>
        <div class="flex-content">
          <el-select v-model="form.cate" class="w-100" placeholder="请选择">
            <el-option label="品种1" value="1" />
            <el-option label="品种2" value="2" />
            <el-option label="品种3" value="3" />
          </el-select>
        </div>
      </div>
      <div class="input-box flex-item align-items-center py-2">
        <div class="flex-label mr-3">毛色</div>
        <div class="flex-content">
          <el-radio-group v-model="form.color">
            <el-radio :label="1">毛色1</el-radio>
            <el-radio :label="2">毛色1</el-radio>
            <el-radio :label="3">毛色1</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="input-box flex-item align-items-center py-2">
        <div class="flex-label mr-3">地址</div>
        <div class="flex-content">
          <el-input v-model="form.address" class="w-100" placeholder="请输入" />
        </div>
      </div>
      <div class="input-box flex-item align-items-center py-2">
        <div class="flex-label mr-3">详情</div>
        <div class="flex-content">
          <el-input v-model="form.detail" class="w-100" placeholder="请输入" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  type: '',
  cate: '',
  color: '',
  address: '',
  detail: ''
});
</script>

<style lang="less" scoped>
@import '~@style/variable.less';

.send-box {
  background-color: @bg5;
  border-radius: 1.5rem;
  .input-box {
    border-bottom: 1px solid @gray;
    .flex-label {
      width: 4rem;
    }
    .common {
      background-color: transparent;
      border: none !important;
      box-shadow: none !important;
      text-align: right;
      font-size: 1rem;
    }
    :deep(.el-input) {
      .el-input__wrapper {
        .common;
        .el-input__inner {
          text-align: right;
        }
      }
    }
    :deep(.el-textarea) {
      .el-textarea__inner {
        .common;
      }
    }
    :deep(.el-radio-group) {
      width: 100%;
      font-size: 1rem;
      .el-radio {
        margin-right: 0.8rem;
        height: 2rem;
        --el-radio-input-border-color-hover: @bg4 !important;
        &:last-child {
          margin-right: 0;
        }
        .el-radio__label {
          padding-left: 0.2rem;
        }
        &.is-checked {
          .el-radio__inner {
            border-color: @bg4;
            background: @bg4;
          }
          .el-radio__label {
            color: @bg4;
          }
        }
      }
    }
  }
}
</style>
